<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>滤镜</title>
    <style>
        /*不能在里面设置宽高*/
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<button id="bt">滤镜</button>
<br>
<br>

</body>

<script>


    const canvas = document.createElement('canvas');
    document.body.append(canvas)
    const ctx = canvas.getContext('2d');
    let width = 600;
    let height = 600;
    canvas.width = width
    canvas.height = height

    const generateGround = () => {
        const img = document.createElement('img');
        img.src = './IMG.JPG';
        img.onload = () => {
            ctx.beginPath();
            //滤镜
            // ctx.filter='none'; //默认值：无滤镜
            // ctx.filter='blur(1px)'; //模糊大小
            // ctx.filter='brightness(50%)'; //亮度，低于100变暗，高于100变亮
            // ctx.filter='contrast(150%)'; //对比度(让该亮的地方更亮，该黑的地方更黑)，0变黑,100无变换,大于100就有变化
            // ctx.filter='grayscale(20%)'; //灰度，100时就会变成灰色,0时无变化
            // ctx.filter='hue-rotate(20deg)'; //色彩旋转,0时无变化,让原本像素颜色旋转(用的不多)
            // ctx.filter='invert(100%)'; //反转绘图,0不变,50图被覆盖全灰，100图颜色完全取反(用的不多)
            // ctx.filter='opacity(70%)'; //对绘图应用透明度。值为 0% 完全透明，值为 100% 保持绘图不变。
            // ctx.filter='saturate(20%)'; //修改绘图饱和度。值为 0% 完全不饱和，值为 100% 保持绘图不变。(饱和度指图片三原色的纯度)
            ctx.filter='sepia(80%)'; //将绘图转换为深褐色(怀旧效果)。值为 100% 完全深褐色，值为 0% 保持绘图不变。
            ctx.drawImage(img, 100, 100, 200, 300);
            ctx.closePath();
        }
    }

    const button = document.getElementById('bt');
    button.addEventListener('click', generateGround);


    const deg2Arc = (deg) => {
        return (deg * Math.PI) / 180;
    }

</script>
</html>